<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>外卖</title>
    <link rel="icon" href="images/favico.ico">
    <!--不同屏幕尺寸根字体设置-->
    <script src="./js/base.js"></script>
    <!--element-ui的样式-->
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--引入vant样式-->
    <link rel="stylesheet" href="styles/vant.min.css"/>
    <!-- 引入样式  -->
    <link rel="stylesheet" href="styles/index.css" />
    <!--本页面内容的样式-->
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <div id="main" class="app">
       
      <div class="divBody"> 
		  
		  <van-pull-refresh v-model="refreshing" @refresh="onRefresh"  style="height:100%;width:100%;overflow:auto;">
		    <van-list
		      v-model:loading="loading"
		      :finished="finished"
		      finished-text="没有更多了"
		      @load="onload"
			  :offset="20"
		    >
		      
				<div class="recommend-module"> 
				     <h5 class="module-title">商家列表</h5>
					  <div class="recommond-list module-list">
						  
						 <section class="recommond-card" v-for="(item,index) in list" v-bind:key="index" @click.capture="itemClick(item)">
							 <div class="card-img-wrap">
								 <img class="card-img"  alt="" :src="item.picture">
							 </div>
							 
							 <div class="card-info-wrap">
								 <div class="card-title-wrap">
									 <div class="card-title ellipse">{{item.name}}</div>
									 <div class="card-desc"></div>
								</div>
								<div class="card-price-wrap">
									<span class="card-price"><span class="price-unit"></span></span>
									<span class="market-price"></span>
									<span class="discount-condition"></span>
								</div>
							</div>
						 </section>
						 
					  </div>
				</div>
		    </van-list>
		  </van-pull-refresh>
  

      </div>
      
		
    </div>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
       <script src="./js/vue.js"></script>
        <!-- 引入组件库 -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <!-- 引入vant样式 -->
        <script src="./js/vant.min.js"></script>        
        <!-- 引入axios -->
        <script src="./js/js.cookie.js"></script>
        <script src="./js/axios.min.js"></script>
        <script src="./js/request.js"></script>
        <script src="./js/common.js"></script>
        <script src="./api/main.js"></script>
		<script src="./api/merchandiser.js"></script>
  </body>
  <script>
	   
      new Vue({
          el:'#main',
          data(){
            return {
			  //传递给后端的参数
			  queryParams: {
				  page: 1, //请求第几页
				  size: 10, //每页请求的数量
			  },
			  list: [], //列表数据 
			  total: 0, //总页数
			  refreshing: false, //下拉刷新
			  loading: false, //上拉加载
			  finished: false, //加载与不加载的状态
			 
            }
          }, 
          created(){
			this.fetchData()
          }, 
          methods:{ 
			  onload(){ 
				// 如果允许下拉刷新
				if (this.refreshing) {
					this.list = [];
					//不允许下拉刷新(不允许再访问第1页了)
					this.refreshing = false;
				    this.queryParams.page=1;
				  } 
				  else{
					this.queryParams.page++;
				  }
				  this.fetchData();
				              
			  },
			  onRefresh(){  	 
				this.finished = false;
			    this.refreshing=true;
					// 重新加载数据
					// 将 loading 设置为 true，表示处于加载状态
				this.loading = true;
				this.onload();
			  },
			  //接取远程服务
			  fetchData(){
				 merchandiserApi(this.queryParams).then( resp => {  
					  if(resp.data.rows.length>0){ 
						 this.list.push(...resp.data.rows)
					  }  
					  this.total = resp.data.total
					  //每一次加载完设置false，便于下次继续加载
					  this.loading=false;
					  this.refreshing = false;
					  //判断是否还有数据加载
					  const totalPages= Math.ceil(this.total/this.queryParams.size)
					 
					  if(this.queryParams.page>totalPages){
					      this.finished=true;
					  }
				  });  
			  },
			  //跳转到商家页面
			   itemClick(item){
				   console.log(item)
				   window.requestAnimationFrame(()=>{
					   window.location.href= '/merchandiser.html?id='+item.id
				   })				   
			   }
			  
          }
      })
  </script>
  
   
  
  
  <style>
	  .home-container .home-body .recommend-module {
	      display: -webkit-box;
	      display: -webkit-flex;
	      display: flex;
	      -webkit-box-orient: vertical;
	      -webkit-box-direction: normal;
	      -webkit-flex-direction: column;
	      flex-direction: column;
	      -webkit-box-flex: 1;
	      -webkit-flex: 1;
	      flex: 1;
	      min-height: 26.7vw;
	      padding: 3.7vw 2.7vw 0;
	   }
	   
	   .recommend-module .module-title {
	       -webkit-flex-shrink: 0;
	       flex-shrink: 0;
	       margin: 0;
	       font-size: 4.5vw;
	       color: #333;
	   }
	   
	  .recommond-list {
	      position: relative;
	  }
	  
	  .recommend-module .module-list {
	      -webkit-box-flex: 1;
	      -webkit-flex-grow: 1;
	      flex-grow: 1;
	      margin-top: 2.7vw;
	  }
	   
	  .recommond-card {
	      display: -webkit-box;
	      display: -webkit-flex;
	      display: flex;
	      -webkit-box-align: center;
	      -webkit-align-items: center;
	      align-items: center;
	      padding: 1.9vw 0;
	      border-bottom: 0.3vw solid #ddd8ce;
	  }
	  .recommond-card:first-of-type {
	      border-top: 0.3vw solid #ddd8ce;
	  }
	  
	  .recommond-card .card-img-wrap {
	      display: -webkit-box;
	      display: -webkit-flex;
	      display: flex;
	      -webkit-flex-shrink: 0;
	      flex-shrink: 0;
	      -webkit-box-pack: center;
	      -webkit-justify-content: center;
	      justify-content: center;
	      width: 24vw;
	      height: 21.9vw;
	      overflow: hidden;
	      background-image: url();
	      background-color: #e0e0e0;
	      background-size: 50%;
	      background-repeat: no-repeat;
	      background-position: 50%;
	      max-width: 24vw;
	  }
	  
	  .recommond-card .card-img-wrap .card-img {
	      height: 21.9vw;
		  border: 0;
		  content: normal!important;
		  vertical-align: top;
	  }
	  
	  .recommond-card .card-info-wrap {
	      display: -webkit-box;
	      display: -webkit-flex;
	      display: flex;
	      max-width: calc(100% - 26.7vw);
	      -webkit-box-orient: vertical;
	      -webkit-box-direction: normal;
	      -webkit-flex-direction: column;
	      flex-direction: column;
	      -webkit-box-pack: justify;
	      -webkit-justify-content: space-between;
	      justify-content: space-between;
	      height: 21.9vw;
	      margin-left: 2.7vw;
	  }
	  
	  .recommond-card .card-info-wrap .card-title {
	      font-size: 4vw;
	      color: #333;
	  }
	  
	  body .ellipse, html .ellipse {
	      overflow: hidden;
	      text-overflow: ellipsis;
	      white-space: nowrap;
	  }
	  .recommond-card .card-info-wrap .card-desc {
	      font-size: 3.2vw;
	      color: #666;
	      text-overflow: ellipsis;
	      display: -webkit-box;
	      -webkit-line-clamp: 2;
	      -webkit-box-orient: vertical;
	      overflow: hidden;
	  }
	  .recommond-card .card-info-wrap .card-price-wrap .card-price {
	      font-size: 4.8vw;
	      color: #f60;
	  }
	  
	  .recommond-card .card-info-wrap .card-price-wrap .price-unit {
	      font-size: 3.2vw;
	  }
	  .recommond-card .card-info-wrap .card-price-wrap .market-price {
	      margin-left: 1.3vw;
	      font-size: 3.2vw;
	      color: #666;
	  }
  </style>
  </html>
